<template>
  <div class="cart-banner">
    <p>
      <img src="./image/组27.png" alt="" /> 同步课程<img src="" alt="" /><img
        src="./image/历史记录_jurassic.png"
        alt=""
      />
      <img src="./image/排序(5).png" alt="" />
    </p>

    <img
      style="width: 23vw; margin-top: 35vh; margin-left: calc(50vw - 11.5vw)"
      src="./image/图书.png"
      alt=""
    />
    <p>就差你了，没有购买课程啦！</p>
    <div class="cart-btn">
      <Button round @click="clickHandle">刷新</Button>
      <Button round @click="GoLearn">去找找</Button>
    </div>
  </div>
</template>
<script setup>
import { Button, Toast } from "vant";
import { get } from "../utils/request";
import { useRouter } from "vue-router";

let router = useRouter();
get("/api/article/list", {}).then((res) => console.log(res));

let GoLearn = () => {
  router.push({
    name: "Home-MiddleMath",
    query: {
      id: 1,
    },
  });
};

let clickHandle = () => {
  Toast.loading({
    message: "加载中...",
    forbidClick: false,
    duration: 1500,
    onOpened: setTimeout(() => {
      Toast.success("刷新成功");
    }, 1500),
  });
};
</script>
<style scoped>
.cart-btn {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 2.9985vh;
}
button {
  width: 35%;
  height: 6.5vh;
  color: #1c97e7;
  border: 2px solid #1c97e7;
  box-sizing: border-box;
}
button:nth-of-type(2) {
  background-color: #1c97e7;
  color: white;
  /* border: 2px solid white; */
}
p:nth-of-type(2) {
  text-align: center;
  color: #1c97e7;
  font-size: 0.8rem;
  margin-top: 1.4993vh;
  margin-left: 4.5vw;
}
p:nth-child(1) {
  text-align: center;
  font-size: 1.2rem;
  color: #333333;
}
.cart-banner {
  box-sizing: border-box;
  padding: 2vw;
}
p img {
  width: 5vw;
  float: left;
  margin-top: 5px;
  margin-left: 10px;
  margin-right: 10px;
}
p:nth-child(1) img:nth-of-type(3),
p:nth-child(1) img:nth-of-type(4) {
  float: right;
  margin-right: 4px;
}
p:nth-child(1) img:nth-of-type(4) {
  width: 4vw;
  margin-top: 3px;
}
p:nth-child(1) img:nth-of-type(3) {
  margin-top: 4.5px;
  margin-right: 10px;
}
</style>
